---
title: Progressive Blur
date: 2024-06-01
description: Add a progressive blur effect to scrollable content
author: magicui
published: true
---

<ComponentPreview name="progressive-blur-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/progressive-blur
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="progressive-blur" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { ProgressiveBlur } from "@/components/ui/progressive-blur"
```

```tsx showLineNumbers
<div className="relative h-[400px] w-full overflow-auto">
  {/* Your scrollable content */}
  <div className="space-y-4 p-4">{/* Content items */}</div>

  <ProgressiveBlur height="50%" position="bottom" />
</div>
```

## Props

### ProgressiveBlur

| Prop         | Type                          | Default                         | Description                                           |
| ------------ | ----------------------------- | ------------------------------- | ----------------------------------------------------- |
| `className`  | `string`                      | `-`                             | Additional classes to apply to the blur container.    |
| `height`     | `string`                      | `"30%"`                         | Height of the blur effect container.                  |
| `position`   | `"top" \| "bottom" \| "both"` | `"bottom"`                      | Position of the blur effect.                          |
| `blurLevels` | `number[]`                    | `[0.5, 1, 2, 4, 8, 16, 32, 64]` | Array of blur values (in px) for progressive effect.  |
| `children`   | `React.ReactNode`             | `-`                             | Optional content to render within the blur container. |
